<template>
	<view class="search">
		<view class="icon">
			<icon type="search" size="16" />
		</view>

		<input class="uni-input" type="text" placeholder="请搜索作者或书名"
			placeholder-style="font-size: 28rpx; color: #818181;" v-model.trim="val" confirm-type="search"
			:style="{ paddingRight: !val ? '24rpx' : '0' }" @confirm="confirm" />

		<view class="icon" @click="clearIcon" v-if="val">
			<icon type="clear" size="16" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'

	const props = defineProps({
		modelValue: String
	})

	const emit = defineEmits(['update:modelValue', 'confirm', 'clear'])

	const val = computed({
		get: () => {
			return props.modelValue
		},
		set: (val : string) => {
			emit('update:modelValue', val)
		}
	})

	const confirm = (e : any) => {
		emit('confirm', e)
	}

	const clearIcon = (e : any) => {
		val.value = ''
		emit('clear', e)
	}
</script>

<style lang="scss">
	.search {
		margin: 0 30rpx;
		@include size(calc(100vw
				/*  #ifdef  MP-WEIXIN  */
				- var(--capsule-width) - (100vw - var(--capsule-right))
				/*  #endif  */
				- 30rpx * 2 - 2px), var(--capsule-height));
		border: 1px solid #eee;
		border-radius: var(--capsule-height);
		background: #FCFCFC;
		@include flex($align: center);
		flex-wrap: nowrap;

		.icon {
			padding: 8rpx 24rpx;
			@include flex($align: center);
		}

		.uni-input {
			flex: 1;
			font-size: 28rpx;
		}
	}
</style>